/* webpack的配置文件===只要是更改了配置文件就需要重启 */
const path = require('path')
// 直接自动生成 html 文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// console.log(process.env, 8888);
module.exports = {
  devtool: 'inline-source-map',
  // mode: 'development',// 上线或者生产环境：production  本地开发：development
  /* webpack核心 */
  entry: path.join(__dirname, 'src/main.js'),//入口===重新定义入口  入口：默认是src/index====想重新定义src/index
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.js',
    clean: true//将之前的dist文件先清空在生成一个新dist
  },//出口==dist/main===
  plugins: [//插件
    new HtmlWebpackPlugin({
      // template: path.resolve(__dirname, 'public/index.html') // 以指定的 html 文件作为生成模板
      template: path.join(__dirname, 'public/index.html')
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader',]
      },
      { // 针对资源模块（图片，字体文件，图标文件等）处理
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset', // 根据文件大小（8KB）小于：把文件转成 base64 打包进 js 文件中（减少网络请求次数）大于：文件复制到输出的目录下
        generator: { // 输出文件时，路径+名字
          filename: 'assets/[hash][ext]'
        }
      },
      {
        test: /\.m?js$/, //可以匹配 .js  .mjs   ？表示最多出现一次
        exclude: /(node_modules|bower_components)/, // 排除指定目录里的 js （不进行编译降级）
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'] // 预设规则
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      "Utils": path.join(__dirname, 'src/utils'),
      "@": path.join(__dirname, 'src')
    }
  }
}